<template>
  <div class="container">
    <div class="wrap">
      <div class="activebg fisrtbg" ref="pic1" id="pic1">
      </div>
      <div class="activebg secondbg" ref="pic2" id="pic2">
      </div>
      <div class="activebg thirdbg" ref="pic3" id="pic3">
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data(){
    return{
    } 
  },
  computed:{
    
  },
  mounted() {
    
  },
  methods: {
    
  }
}
</script>

<style lang="less">
.container{
  width:100%;
  height: 100vh;
  perspective: 1px;
  overflow:auto;
  &::-webkit-scrollbar{
    display:none;
  }
}
.activebg{
  height: 100vh;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  &.fisrtbg{
    position: relative;
    background: url('../static/background.jpg') no-repeat;
    background-size: 100% auto;
    background-position: center center;
    background-attachment: fixed;
  }
  &.secondbg{
    position: relative;
    background: url('../static/background2.jpg') no-repeat;
    background-size: 100% auto;
    background-position: center center;
    background-attachment: fixed;
  }
  &.thirdbg{
    position: relative;
    background: url('../static/background3.jpg') no-repeat;
    background-size: 100% auto;
    background-position: center center;
    background-attachment: fixed;
  }
}
</style>
